<template>
	<div class="order">
		<div class="order_header">
			<div class="top_back"></div>
			<div class="top_title">
				<span>全部订单</span>
				<i class="iconfont">&#xe643;</i>
			</div>
			<div class="order_tab">
				<ol>
					<li>全部</li>
					<li>待付款</li>
					<li>已付款</li>
					<li>待评价</li>
					<li>退款/售后</li>
				</ol>
			</div>
		</div>
		<div class="order_middle">
			<img src="../../../public/img/order-bg.png">
			<p>这里什么也没有</p>
			<p>继续去探索未知的新世界吧</p>
		</div>
		<BottomNav :prop="2" ></BottomNav>
	</div>
</template>

<script>
	// 引入
	// 引入公共组件-底部
	import BottomNav from '../default/BottomNav.vue';
	export default{
		name: 'Order',
		components : {
			BottomNav
		}
	}
</script>

<style scoped>
	.order{
		width: 100%;
		float: left;
		background-color: #C2C2C2;
		position: relative;
		/* background-color: pink; */
	}
	.order_header{
		position: relative;
	}
	.order_middle{
		width: 50%;
		position: absolute;
		top: 150%;
		left: 25%;
		
	}
	.order_middle p{
		width: 300px;
		line-height: 55px;
		font-size: 25px;
		text-align: center;
		margin-left: -20px;
	}
	.order_middle img{
		width: 100%;
		height: 100%;
	}
	.order_header .top_back{
		position: absolute;
		top: 50%;
		margin-top: -0.5rem;
		left: 0.3rem;
		width: 1rem;
		height: 1rem;
		background: url(../../../public/img/order_back.png)no-repeat;
		background-size: 100% 100%;
	}
	.order_header .top_title{
		width: 30%;
		text-align: center;
		margin: 0 auto;
		line-height: 55px;
		font-size: 0.55rem;
		font-weight: bold;
	}
	.order_header .top_title i{
		font-size: 0.55rem;
		display: block;
		width: 20%;
		float: right;
	}
	.order_header p{
		text-align: center;
		line-height: 50px;
		font-size: 0.5rem;
		font-weight: bold;
	}
	.order_header .top_title i:hover{
	    -webkit-transform:rotate(360deg);
	    transform:rotate(180deg);
	    -webkit-transition:-webkit-transform 10s linear;
	    transition:transform 0.3s linear;
	}
	.order_tab{
		float: left;
		width: 98%;
		margin-top: 0.5rem;
	}
	.order_tab ol{
		width: 95%;
		float: left;
	}
	.order_tab ol li{
		float: left;
		width: 20%;
		height: 1.2rem;
		line-height: 1.2rem;
		font-size: 0.4rem;
		text-align: center;
		
	}
</style>
